<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微小区登录</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="plugins/layui/css/layui.css">
    <link rel="stylesheet" href="css/login.css">


    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--弹出层-->
    <script src="plugins/layui/layui.js"></script>
</head>


<body>
<section>

    <div class="color"></div>

    <div class="color"></div>

    <div class="color"></div>

    <div class="box">

        <div class="square" style="--i:0;"></div>

        <div class="square" style="--i:1;"></div>

        <div class="square" style="--i:2;"></div>

        <div class="square" style="--i:3;"></div>

        <div class="square" style="--i:4;"></div>

        <div class="container">
            <div class="form">
                <h2>Login Form</h2>
                <form role="form">
                    <!-- 账号 -->
                    <div class="form-group">
                        <div class="input-group inputBox">
                            <div class="addon input-group-addon"><i class="fas fa-user"></i></div>
                            <input type="text" class="form-control" id="account" placeholder="请输入账号">
                        </div>
                    </div>
                    <!-- 密码 -->
                    <div class="form-group  inputBox">
                        <label></label>
                        <div class="input-group">
                            <div class="addon input-group-addon"><i class="fas fa-lock"></i></div>
                            <input type="password" class="form-control" id="pswd" placeholder="请输入密码">
                        </div>
                    </div>
                    <!-- 单选框 -->
                    <div class="switch-field">
                        <input type="radio" id="radio-one" name="usertype" value="emp" checked />
                        <label for="radio-one">物业</label>
                        <input type="radio" id="radio-two" name="usertype" value="household" />
                        <label for="radio-two">业主</label>
                    </div>

                    <!-- 登录按钮 -->
                    <button type="button" class="btn login-btn  btn-block"  id="login">登录</button>
                </form>
                <div class="re_pswd"><a href="./page/forgot-password.html">忘记密码?点击这里</a>
                    <a href="./page/phone-login.html" style="position: absolute;right: 40px">手机号登录</a>
                </div>
            </div>
        </div>

    </div>

</section>


    <script>

        $("#login").click(function(){

            let account = $("#account").val()
            let pswd = $("#pswd").val()
            let userType = $("input[name='usertype']:checked").val()
            console.log(userType)
            $.ajax({
                url:"dologin",
                dataType:"json",
                data:{
                    account: account,
                    pswd: pswd,
                    usertype: userType
                },
                success: function(rs){
                    console.log(rs.rs)
                    if(rs.rs){
                        window.location.href="index.html"
                    }else{
                        layer.msg('用户名或密码错误', {icon: 5});
                    }

                }
            })
        })

    </script>

</body>

</html>